<template>
  <div>
    <el-breadcrumb class="breadcrumb page-title" separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">{{$t('m.MyAds')}}</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="bg container-padding">

      <!--<div class="tips">-->
        <!--<div class="tips-title">{{$t('m.agentList_tips')}}</div>-->
        <!--<a href="http://bestproperty.com.mm/download.html" target="_blank">{{$t('m.agentList_downdoad')}}</a>-->
      <!--</div>-->

      <el-row>
        <el-col :span="24">
          <!--表单-->
          <el-form :inline="true" class="demo-form-inline form-height">
            <el-form-item label="">
              <el-radio-group v-model="radio3" @change="statusIdChange">
                <el-radio-button label="Active">{{$t('m.Active')}} {{statusArr[0].countNumber}}</el-radio-button>
                <el-radio-button label="Inactive">{{$t('m.Inactive')}} {{statusArr[1].countNumber}}</el-radio-button>
                <el-radio-button label="Closed">{{$t('m.SoldRented')}} {{statusArr[2].countNumber}}</el-radio-button>
              </el-radio-group>
            </el-form-item>
            <el-form-item class="cascader" :label="$t('m.PropertyType')">
              <el-cascader
                placeholder=""
                :options="optionsR"
                filterable
                change-on-select
                class="search-agency"
                v-model="selectValue"
                @change="selectedChange"
              ></el-cascader>
            </el-form-item>
            <el-button type="primary" @click="addDevelopment">{{$t('m.New')}}<i class="el-icon-plus el-icon--right"></i></el-button>
          </el-form>
          <!--批量操作-->
          <div class="options">
            <span class="change-status">{{$t('m.ChangeStatus')}}</span>
            <el-button @click="onOptionsAll(1)">{{$t('m.Draft')}}</el-button>
            <el-button @click="onOptionsAll(2)">{{$t('m.Active')}}</el-button>
            <el-button @click="onOptionsAll(4)">{{$t('m.SoldRented')}}</el-button>
            <el-button @click="onOptionsAll(6, true)">{{$t('m.Delete')}}</el-button>
          </div>
          <!--表格-->
          <el-table
            :data="developmentList"
            v-loading="tableLoading"
            border
            @selection-change="handleSelectionChange"
            style="width: 100%">
            <el-table-column
              type="selection"
              width="55">
            </el-table-column>


            <el-table-column
              prop="listingId"
              :label="$t('m.ListingID')"
              align="center"
              min-width="100">
              <template slot-scope="scope">
                <el-button @click="view(scope.row.transactionId)" type="text">{{scope.row.listingId}}</el-button>
              </template>
            </el-table-column>

            <el-table-column
              prop="listedDate"
              :label="$t('m.ListedDate')"
              align="center"
              min-width="120">
              <template slot-scope="scope">
                {{dateFormat(scope.row.listedDate, 'listedDate')}}
              </template>
            </el-table-column>

            <el-table-column
              prop="listingType"
              :label="$t('m.ListingType')"
              align="center"
              min-width="120">
              <template slot-scope="scope">
                {{getListingTypeItem(scope.row.listingType)}}
              </template>
            </el-table-column>

            <el-table-column
              prop="propertyType"
              :label="$t('m.PropertyType')"
              align="center"
              min-width="120">
              <template slot-scope="scope">
                {{getPropertyTypeItem(scope.row.propertyType)}}
              </template>
            </el-table-column>

            <el-table-column
              prop="mmkPrice"
              :label="$t('m.PriceLakh')"
              align="center"
              min-width="120">
            </el-table-column>

            <el-table-column
              prop="usdPrice"
              :label="$t('m.PriceUSD')"
              align="center"
              min-width="120">
            </el-table-column>


            <el-table-column
              prop="propertyName"
              :label="$t('m.PropertyName')"
              align="center"
              min-width="120">
              <template slot-scope="scope">
                {{translateUTZaw(scope.row.propertyName)}}
              </template>
            </el-table-column>

            <el-table-column
              prop="street"
              :label="$t('m.Address')"
              align="center"
              min-width="100">
              <template slot-scope="scope">
                {{translateUTZaw(scope.row.street)}}
              </template>
            </el-table-column>

            <el-table-column
              prop="township"
              :label="$t('m.Township')"
              align="center"
              min-width="100">
              <template slot-scope="scope">
                {{getTownshipItem(scope.row.township)}}
              </template>
            </el-table-column>

            <el-table-column
              prop="region"
              :label="$t('m.Region')"
              align="center"
              min-width="100">
              <template slot-scope="scope">
                {{getRegionItem(scope.row.region)}}
              </template>
            </el-table-column>

          </el-table>
          <!--分页-->
          <div class="block" style="margin-top: 15px;text-align: center;">
            <el-pagination
              @size-change="handleChangeSize"
              @current-change="handleChangePage"
              :current-page="pageData.pageNo"
              :page-size="pageData.pageSize"
              :page-sizes="[10, 20, 50, 100, 500]"
              :page-count="pageInfo.totalPages"
              :total="pageInfo.totalCount"
              layout="total, prev, pager, next, jumper, sizes">
            </el-pagination>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>

</template>

<script>
  import township from '@/json/township'
  import region from '@/json/region'
  import propertyType from '@/json/propertyType'
  import mm_township from '@/mmJson/township'
  import mm_region from '@/mmJson/region'
  import mm_propertyType from '@/mmJson/propertyType'
  import { transactionList, agentDevelopmentStatus, agenetStatusCount } from '../../api/apiNext'

  export default {
    name: 'devlopmentList',
    data () {
      return {
        statusArr: [
          {statusId: 2, countNumber: 0},
          // {statusId: 1, countNumber: 0},//draft
          {statusId: 5, countNumber: 0},//inactive
          {statusId: 4, countNumber: 0},
        ],
        radio3: 'Active',
        // Active 与页面中 Published  对应
        statusId: [
          {text: 'Active', value: '1'},
          {text: 'Closed', value: '2'},
          {text: 'Delete', value: '3'},
          {text: 'Draft', value: '4'}],
        propertyType: [
          {value: 1, text: 'Apartment'},
          {value: 2, text: 'Condo'},
          {value: 3, text: 'House'},
          {value: 4, text: 'Land'},
          {value: 8, text: 'Commercial'},
          {value: 9, text: 'Development'},
          {value: '', text: 'ALl'}
        ],
        sendData: {
          transactionStatusTypeId: 2,
          propertyTypeId: ''
        },
        developmentList: [],
        selectValue: [],
        pageData: {
          pageNum: 1,
          pageSize: 10
        },
        pageInfo: {
          totalCount: 0,
          totalPages: 0
        },
        tableLoading: false,
        optionsR: [{
          value: '',
          label: 'ALL'
        }, {
          value: '1',
          label: 'Apartment'
        }, {
          value: '3',
          label: 'House'
        }, {
          value: '2',
          label: 'Condo'
        }, {
          value: '4',
          label: 'Land'
        }, {
          value: '8',
          label: 'Commercial'
        }],
        multipleSelection: []
      }
    },
    computed: {
      townshipJson() {
        if (this.$store.state.localLang == 'MM') {
          return mm_township
        } else {
          return township
        }
      },
      regionJson() {
        if (this.$store.state.localLang == 'MM') {
          return mm_region
        } else {
          return region
        }
      },
      propertyTypeJson(){
        if(this.$store.state.localLang == 'MM'){
          return mm_propertyType
        }else {
          return propertyType
        }
      },
      listingTypeJson() {
        if (this.$store.state.localLang == 'MM') {
          return [
            {value: 2, text: 'ဌားရန္'},
            {value: 1, text: 'ေရာင္းရန္္'},
          ]
        } else {
          return [
            {value: 2, text: 'For Rent'},
            {value: 1, text: 'For Sale'},
          ]
        }
      },
    },
    methods: {
      getList () {
        this.sendData.propertyTypeId = this.selectValue[0] || ''
        this.tableLoading = true
        transactionList(Object.assign(this.sendData, this.pageData))
          .then((res) => {
            if (res.data.errorID === 100004) {
              this.$router.push('/login')
              return
            }

            let data = res
            this.developmentList = data.data.object.list
            // 分页信息配置
            this.pageInfo.totalPages = data.data.object.pages
            this.pageInfo.totalCount = data.data.object.total
            // 清除loading 状态
            setTimeout(() => {
              this.tableLoading = false
            }, 400)
          })
          .catch((error) => {
            this.showToast(error.errorID)
            setTimeout(() => {
              this.tableLoading = false
            }, 400)
          })
      },
      view (id) {
        this.$router.push({
          path: '/agentDetail',
          query: {
            id: id
          }
        })
      },
      handleChangeSize (val) {
        this.pageData.pageSize = parseInt(val)
        this.pageData.pageNum = 1
        this.getList()
      },
      handleChangePage (val) {
        this.pageData.pageNum = val
        this.getList()
      },
      addDevelopment () {
        this.$router.push('/newAgent')
      },
      dateFormat (value, str) {
        var date = new Date(value)
        var Y = date.getFullYear()
        var m = date.getMonth() + 1
        var d = date.getDate()
        var H = date.getHours()
        var i = date.getMinutes()
        var s = date.getSeconds()
        if (m < 10) {
          m = '0' + m
        }
        if (d < 10) {
          d = '0' + d
        }
        if (H < 10) {
          H = '0' + H
        }
        if (i < 10) {
          i = '0' + i
        }
        if (s < 10) {
          s = '0' + s
        }
        if (str == 'listedDate') {
          var t = d + '-' + m + '-' + Y + '  ' + H + ':' + i + ':' + s
          return t
        } else {
          var ts = m + '-' + Y
          return ts
        }
      },
      // statusId 状态切换监听,并修改到data中
      statusIdChange (val) {
        if (val === 'Active') {
          this.sendData.transactionStatusTypeId = 2
        } else if (val === 'Inactive') {
          this.sendData.transactionStatusTypeId = 5
        } else if (val === 'Closed') {
          this.sendData.transactionStatusTypeId = 4
        }
        this.getList()
      },
      selectedChange () {
        this.getList()
      },
      handleSelectionChange (val) {
        this.multipleSelection = val
        // [{row当前所有数据，developmentId}]
        console.log(this.multipleSelection)
      },
      // 批量操作的代码  批量接口封装方法
      onOptionsAll (id, boolen) {
        // 判断是否有选中的
        if (this.multipleSelection.length === 0) {
          this.$message.error('Please select a row first')
          return
        }
        // 如果是删除的话，需要弹出dialog
        if (boolen) {
          this.$prompt('This data will be deleted permanently.  Please type "1" to confirm.', 'Delete account！', {
            confirmButtonText: 'OK',
            cancelButtonText: 'Cancel',
            inputPattern: /1/,
            inputErrorMessage: 'Enter error',
            inputValidator: (value) => {
              // 继续校验
              if (!(value == 1 && value.length == 1)) {
                return false
              }
            }
          })
            .then(() => {
              let developmentIdList = []
              developmentIdList = this.multipleSelection.map((item, index) => {
                return item.transactionId
              })
              let sendData = {
                statusId: id,
                transactionIdList: developmentIdList
              }
              // 'Content-Type': 'application/x-www-form-urlencode'
              agentDevelopmentStatus(sendData)
                .then((res) => {
                  if (res.data.errorID === 100004) {
                    this.showToast(res.data.errorID)
                    this.$router.push('/login')
                    return
                  }

                  // 调用统计
                  this.statusCount()

                  this.showToast(0)

                  this.getList()
                })
                .catch((error) => {
                  this.showToast(error.errorID)
                })
            })
            .catch(() => {
            })
          // 如果是删除的操作，之后的代码不执行
          return
        }

        let developmentIdList = []
        developmentIdList = this.multipleSelection.map((item, index) => {
          return item.transactionId
        })
        let sendData = {
          statusId: id,
          transactionIdList: developmentIdList
        }
        // 'Content-Type': 'application/x-www-form-urlencode'
        agentDevelopmentStatus(sendData)
          .then((res) => {
            this.showToast(0)
            this.getList()
            // 调用统计
            this.statusCount()
          })
          .catch((error) => {
            this.showToast(error.errorID)
          })
      },
      // 调用统计接口
      statusCount () {
        agenetStatusCount().then((res) => {

          // 参数初始化
          this.statusArr = [
            {statusId: 2, countNumber: 0},
            // {statusId: 1, countNumber: 0},//draft
            {statusId: 5, countNumber: 0},//inactive
            {statusId: 4, countNumber: 0}
          ]

          if (res.data.object.length > 0) {
            let arr = res.data.object
            for (var i = 0; i < arr.length; i++) {
              if(arr[i].statusId == 2){
                this.statusArr[0].countNumber = arr[i].numberCount
              }else if(arr[i].statusId == 5){
                this.statusArr[1].countNumber = arr[i].numberCount
              }else if(arr[i].statusId == 4){
                this.statusArr[2].countNumber = arr[i].numberCount
              }
            }
          }
        }).catch(() => {

        })
      },
      translateUTZaw(str){
        if (!str) return '';
        return this.$translateLang(str, 'unicodeTozawgyi')
      },
      getTownshipItem (it) {
        let str = ''
        this.townshipJson.forEach((item) => {
          if (item.value == it) {
            str = item.text || ''
          }
        })
        return str
      },
      getRegionItem (it) {
        let str = ''
        this.regionJson.forEach((item) => {
          if (item.value == it) {
            str = item.text || ''
          }
        })
        return str
      },
      getPropertyTypeItem (it) {
        let str = ''
        this.propertyTypeJson.forEach((item) => {
          if (item.value == it) {
            str = item.text || ''
          }
        })
        return str
      },
      getListingTypeItem (it) {
        let str = ''
        this.listingTypeJson.forEach((item) => {
          if (item.value == it) {
            str = item.text || ''
          }
        })
        return str
      },
    },
    mounted () {
      this.getList()
      this.statusCount()
    }
  }
</script>


<style>
  .page-title {
    padding: 20px 40px;
    border-bottom: 1px solid #e6e6e6;
    font-size: 20px!important;
  }

  .breadcrumb {
    margin-bottom: 20px;
  }

  .bg {
    background: #fff;
    padding: 20px;
  }

  .cascader {
    margin-left: 20px;
    margin-right: 30px !important;
  }

  .form-height {
    padding: 20px 0;
    border-bottom: 1px solid #d7dfd5;
    margin-bottom: 20px;
  }

  .options {
    padding: 0px 0 20px 0;
  }

  .page-title {
    padding: 20px 40px;
    border-bottom: 1px solid #e6e6e6;
    font-size: 20px;
  }

  .container-padding {
    padding: 0 40px;
  }


  /*当前页面*/
  .tips {
    padding: 15px 0;
    font-size: 16px;
  }
  .tips-title{
    margin-bottom: 10px;
  }
  .change-status {
    font-size: 16px;
    margin-right: 15px;
  }
</style>
